<script setup lang="ts">
  import { User, Lock } from '@element-plus/icons-vue'
  import { reactive, ref } from 'vue'
  //引入我们的user仓库
  import useUserStore from '@/stores/modules/user'
  // 引入路由
  import { useRouter } from 'vue-router'
  import { ElNotification } from 'element-plus'
  import { getNowTime } from '@/utils/dateTime'
  let loginFormRef = ref(false)
  // 获取路由器
  const router = useRouter()

  let userStore = useUserStore()
  // 收集用户输入的表单数据，账号和密码
  let loginForm = reactive({
    username: 'admin',
    password: '123456'
  })
  let rules = reactive({
    username: [
      {
        required: true,
        message: '请输入用户名',
        trigger: 'blur'
      },
      {
        min: 4,
        max: 12,
        message: '用户名长度在4到12之间',
        trigger: 'change'
      }
    ],
    password: [
      {
        required: true,
        message: '请输入密码',
        trigger: 'blur'
      },
      {
        min: 6,
        max: 12,
        message: '密码长度在6到12之间',
        trigger: 'blur'
      }
    ]
  })
  //获取组件实例对象
  let formRef = ref()
  //登录按钮
  const login = async () => {
    //1.表单预校验
    await formRef.value.validate()
    //开始加载
    loginFormRef.value = true
    //1.收集用户输入的账号和密码
    //2.发送请求，把账号和密码发送给后端 pina
    try {
      await userStore.login(loginForm)
      //登录成功,跳转到首页
      router.push('/')
      ElNotification({
        title: `HI! ${getNowTime()}`,
        message: '欢迎进入本系统',
        type: 'success'
      })
    } catch (error) {
      console.log(error)
    } finally {
      //结束加载
      loginFormRef.value = false
    }
  }
</script>
<template>
  <div class="login-container">
    <el-row>
      <!-- 一行24列，当前这个col占领12份，并且偏移12份，所以位于右半边 -->
      <el-col :span="12" :offset="12" :xs="0" :sm="0" :md="0" :lg="12" :xl="12">
        <el-form class="login-from" ref="formRef" :model="loginForm" :rules="rules" auto-complete="on">
          <h1>Hello</h1>
          <h2>欢迎来到我的vue3学习系统</h2>
          <el-form-item prop="username">
            <el-input type="text" placeholder="请输入用户名" :prefix-icon="User" v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" placeholder="请输入密码" :prefix-icon="Lock" v-model="loginForm.password" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click.prevent="login" :loading="loginFormRef">登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
  .login-container {
    width: 100%;
    height: 100vh; //100vh是视口的高度
    background: url('@/assets/images/background.jpg') no-repeat;
    background-size: cover; //背景图片覆盖整个容器
    .login-from {
      padding: 40px;
      width: 45%;
      top: 30vh;
      position: relative;
      background: url('@/assets/images/login_form.png') no-repeat;
      background-size: cover;
      h1 {
        color: white;
        font-size: 50px;
      }
      h2 {
        font-size: 20px;
        color: white;
        margin: 20px 0;
      }
    }
  }
</style>
